<template>
	<view class="">
		<view class="" :style="{height,paddingTop}">
		</view>
		<view class="nav-bar" :style="{height,paddingTop}">
			<block v-if="navType === 'index'">
				<view class="address-search-score-view flex a-i-c j-c-b">
					<view class="address-box f-s-30 flex a-i-c" :style="{color:navColor}" @click.stop="showMyAddress">
						<text class="address-text">{{navAddress.area.name || ""}}</text>
						<image class="more-icon" src="@/static/images/more-icon.svg" mode=""></image>
					</view>
					<view class="search-f" @click="goTo({url:'/pages/shop/searchGoods'})">
						<view class="search-box flex a-i-c" style="flex: 1;">
							<image class="search-icon" src="@/static/images/index-search-icon.svg" mode=""></image>
							<input type="text" class="f-s-26" placeholder="搜索车辆/配件" placeholder-class="color-666">
						</view>
					</view>
					<image class="score-icon" @click="openQrCode" src="@/static/images/score-icon.svg" mode=""></image>
				</view>
			</block>
			<block v-if="navType === 'secondCar'">
				<view class="address-search-score-view flex a-i-c j-c-b">
					<view class="flex a-i-c margin-right">
						<image class="back-icon" @click="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text" style="white-space: nowrap;">{{title || ""}}</text>
						</view>
					</view>
					<view class="search-f" :style="showAllClassBtn?{width: 'auto'}:{flex:1}">
						<view class="search-box flex a-i-c" style="flex: 1;">
							<image class="search-icon" src="@/static/images/index-search-icon.svg" mode=""></image>
							<input type="text" class="f-s-26" @input="keyWrodInput" data-type="changeNavKeyWords" v-model="keyword" placeholder="搜索车辆" placeholder-class="color-666">
						</view>
					</view>
					<view class="f-s-26 flex f-d-c a-i-c" v-if="showAllClassBtn" @click="goTo({url:'/pages/secondCar/secondCarClass'})">
						<text>All</text>
						<text style="white-space: nowrap;">分类</text>
					</view>
				</view>
			</block>
			<block v-if="navType === 'carSelect'">
				<view class="address-search-score-view flex a-i-c j-c-b">
					<view class="flex a-i-c margin-right">
						<image class="back-icon" @click="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="search-f" style="flex: 1;" @click="goTo({url:'/pages/shop/searchGoods'})">
						<view class="search-box flex a-i-c">
							<image class="search-icon" src="@/static/images/index-search-icon.svg" mode=""></image>
							<input type="text" class="f-s-26" placeholder="搜索车辆/配件" placeholder-class="color-666">
						</view>
					</view>
				</view>
			</block>
			<block v-if="navType === 'circle'">
				<view class="circle-nav-box flex a-i-c j-c-b">
					<view class="left f-s-40 f-w-b" :style="{color:navColor}">
						卡友圈<text class="color-2567F3 f-s-24 f-w-4">（全国卡友交流地）</text>
					</view>
					<view class="right" @click="goTo({url:'/pages/msg/index'})">
						<image class="image" src="@/static/images/circle/msg-icon.svg" mode=""></image>
						<view class="dlog-dig" v-if="show_dito">
							
						</view>
					</view>
				</view>
			</block>
			<block v-if="navType === 'findCar'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
						<view class="address-box f-s-30 flex a-i-c" :style="{color:navColor}" @click="showMyAddress">
							<text class="address-text">{{navAddress.area.name || ""}}</text>
							<image class="more-icon" src="@/static/images/more-icon.svg" mode=""></image>
						</view>
					</view>
					<view class="find-card-tab flex a-i-c">
						<block v-for="(item, index) in find_car_tab" :key="index">
							<view class="item flex a-i-c f-d-c" @click="changeTab('changeFindCarTab',item)" :class="changeFindCarTab_id === item.id?'active':'unactive'">
								{{item.title}}
								<view class="line" v-if="changeFindCarTab_id === item.id"></view>
							</view>
						</block>
					</view>
					<view class="right" @click="goTo({url:'/pages/msg/index'})">
						<image class="image" src="@/static/images/circle/msg-icon.svg" mode=""></image>
						<view class="dlog-dig" v-if="show_dito">
							
						</view>
					</view>
				</view>
			</block>
			<block v-if="navType === 'getwork'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="find-card-tab flex a-i-c">
						<block v-for="(item, index) in work_tab_list" :key="index">
							<view class="item flex a-i-c f-d-c" @click="changeTab('changeWorkTab',item)" :class="changeWorkTab_id === item.id?'active':'unactive'">
								{{item.title}}
								<view class="line" v-if="changeWorkTab_id === item.id"></view>
							</view>
						</block>
					</view>
					<view class="right" @click="goTo({url:'/pages/msg/index'})">
						<image class="image" src="@/static/images/circle/msg-icon.svg" mode=""></image>
						<view class="dlog-dig" v-if="show_dito">
							
						</view>
					</view>
				</view>
			</block>
			<block v-if="navType === 'log'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="find-card-tab flex a-i-c">
						<block v-for="(item, index) in log_tab_list" :key="index">
							<view class="item flex a-i-c f-d-c" @click="changeTab('changeLogTab',item)" :class="changeLogTab_id === item.id?'active':'unactive'">
								<!-- {{item.title}} -->
								<!-- <view class="line" v-if="changeLogTab_id === item.id"></view> -->
							</view>
						</block>
					</view>
					<view class="" >
						
					</view>
				</view>
			</block>
			<block v-if="navType === 'my'">
				<view class="nav-my">
					<image class="setting-icon" @click="goTo({url:'/pages/my/myConfig'})" src="@/static/images/my/setting-icon.svg" mode=""></image>
					<view class="right">
						<image class="image" src="@/static/images/circle/msg-icon.svg" mode=""  @click="goTo({url:'/pages/msg/index'})"></image>
						<view class="dlog-dig" v-if="show_dito">
							
						</view>
					</view>
					<view class="right">
						<image class="image2" src="@/static/images/s-iconjiaou.svg" mode=""  @click="openQrCodeMy"></image>
					</view>
					
				</view>
				
				<uni-popup type="center" ref="qrUserImagePopup">
					<view class="qr-image-popup flex a-i-c f-d-c">
						<view class="user-qr flex f-d-c a-i-c">
							<image class="avatar" :src="userInfo?.avatar" mode=""></image>
							<view class="f-w-b f-s-40" style="color: #240F05;margin-bottom: 28rpx;">
								{{userInfo?.nickname||""}}
							</view>
							<image class="qr-image-user" style="background-color: #999999;" :src="userInfo?.qr_code" mode=""></image>
							<view class="user-qr-tip-text color-999 f-s-24">
								识别图中二维码 下载APP 
							</view>
							<view class="color-999 f-s-24 l-h-40">
								获得积分奖励
							</view>
						</view>
						<view class="save-qr-image-button all-center f-s-30 color-fff" @click="saveUserQrCode">
							保存图片
						</view>
					</view>
				</uni-popup>
			</block>
			<block v-if="navType === 'other'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<block v-if="showLeft">
							<image v-if="backType ==='black'" class="back-icon" @click.stop="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
							<image v-else class="back-icon" @click.stop="goBack" src="@/static/images/nav-back-white.svg"></image>
							<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
								<text class="address-text">{{title || ""}}</text>
							</view>
						</block>
					</view>
					<view class="index-box all-center color-666 f-s-24" v-if="showIndex" @click.stop="goSwitch({url:'/pages/index/index',current:1})">
						<image class="index-icon" src="@/static/images/msg/index.svg" mode=""></image>
						首页
					</view>
				</view>
			</block>
			<block v-if="navType === 'other2'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="address-box f-s-30 flex a-i-c" :style="{color:navColor}" @click="showMyAddress" v-if="!showAddCard">
						<text class="address-text">{{navAddress.area.name || ""}}</text>
						<image class="more-icon" src="@/static/images/more-icon.svg" mode=""></image>
					</view>
					<view class="add-card color-2567F3 all-center f-s-24" v-if="showAddCard" @click="goTo({url:'/pages/my/addYinhangCard'})">
						+添加
					</view>
				</view>
			</block>
			<block v-if="navType === 'station'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="index-box1 all-center color-666 f-s-24" @click="downLoadQrCode">
						<image class="index-icon" src="@/static/images/s-iconjiaou.svg" mode=""></image>
						油站二维码
					</view>
				</view>
			</block>
			<block v-if="navType === 'shop' ||navType === 'goodList'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click="goBack" src="@/static/images/nav-back-white.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="search-f" style="width: 400rpx;" @click="navType === 'shop'&&goTo({url:'/pages/shop/searchGoods'})">
						<view class="search-box flex a-i-c" style="flex: 1;">
							<image class="search-icon" src="@/static/images/index-search-icon.svg" mode=""></image>
							<input type="text" class="f-s-26" @input="keyWrodInput" data-type="changeGoodsKeyWrods" v-model="keyword" placeholder="搜索配件" placeholder-class="color-666">
						</view>
					</view>
					<view class="index-box1 all-center f-d-c color-fff f-s-24" @click="goTo({url:'/pages/shop/buyCar'})">
						<image class="shop-car" src="@/static/images/shop-car.svg" mode=""></image>
						购物车
					</view>
				</view>
			</block>
			<block v-if="navType === 'search'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="search-f" style="width: 500rpx;">
						<view class="search-box flex a-i-c" style="flex: 1;">
							<image class="search-icon" src="@/static/images/index-search-icon.svg" mode=""></image>
							<input type="text" class="f-s-26" @input="keyWrodInput" data-type="changeSearchKeyWords" v-model="keyword" placeholder="搜索配件" placeholder-class="color-666">
						</view>
					</view>
				</view>
			</block>
			<block v-if="navType === 'store'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click="goBack" src="@/static/images/nav-back-white.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="index-box1 all-center f-d-c color-fff f-s-24" @click="goTo({url:'/pages/shop/buyCar'})">
						<image class="shop-car" src="@/static/images/shop-car.svg" mode=""></image>
						购物车
					</view>
				</view>
			</block>
			<block v-if="navType === 'goods'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click="goBack" src="@/static/images/nav-back-white.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="right" @click="goTo({url:'/pages/msg/index'})">
						<image class="image" src="@/static/images/circle/white-msg-icon.svg" mode=""></image>
						<view class="dlog-dig" v-if="show_dito">
							
						</view>
					</view>
				</view>
			</block>
			<block v-if="navType === 'order'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click.stop="goBack" src="@/static/images/nav-back-white.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="index-box1 all-center f-d-c color-fff f-s-24" @click="navConfigClick">
						<block v-if="navRight">
							管理
						</block>
					</view>
				</view>
			</block>
			<block v-if="navType.includes('myvideo')">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="back-icon" @click.stop="goBack" src="@/static/images/nav-back-white.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view v-if="navType === 'myvideo2'">
					<view class="index-box2 flex a-i-c color-fff f-s-24 j-c-b">
						<image class="live-icon" @click="showLiveMenu" src="@/static/images/live/nav/open-live-icon.svg" mode=""></image>
						<image class="live-icon" @click="goTo({url:'/pages/live/config/index'})" src="@/static/images/live/nav/my-live-set-icon.svg" mode=""></image>
						<image class="live-icon" @click="showLiveMenu" src="@/static/images/live/nav/my-live-add-icon.svg" mode=""></image>
					</view>
					<view class="open-live-box flex f-d-c a-i-c" :class="show_menu?'open-live-show':'open-live-hide'" :style="{top:top_number+'px'}">
						<view style="margin:18upx 20upx 0;overflow:hidden;">
						<view class="live-button-item flex a-i-c j-c-b f-s-26 color-fff" @click="show_menu = false,goTo({url:'/pages/live/takeVideo/index'})">
							<image class="icon" src="@/static/images/live/open-video-icon.svg" mode=""></image>
							拍视频
						</view>
						<!-- goTo({url:'/pages/live/sendVideo/index'}) -->
						<view class="live-button-item flex a-i-c j-c-b f-s-26 color-fff" @click="show_menu = false,goTo({url:'/pages/live/sendVideo/index'})">
							<image class="icon" src="@/static/images/live/send-video-icon.svg" mode=""></image>
							发视频
						</view>
						<view class="live-button-item flex a-i-c j-c-b f-s-26 color-fff" @click="show_menu = false,goTo({url:'/pages/live/config/takeVideoStar'})">
							<image class="icon" src="@/static/images/live/open-live-video-icon.svg" mode=""></image>
							开直播
						</view>
						</view>
					</view>

					</view>
				</view>
			</block>
			<block v-if="navType === 'voideIndex'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="live-my-icon" @click="goTo({url:'/pages/live/myLiveCenter'})" src="@/static/live/my-white.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="find-card-tab flex a-i-c">
						<block v-for="(item, index) in live_tab_list" :key="index">
							<view class="item flex a-i-c f-d-c" @click="changeTab('changeLiveTab',item)" :class="changeLiveTab_id === item.id?'live_active':'live_unactive'">
								{{item.title}}
								<view class="live_line" v-if="changeLiveTab_id === item.id"></view>
							</view>
						</block>
					</view>
					<view class="search-button all-center">
						<image class="icon" src="@/static/live/live-search-white.svg" mode=""></image>
					</view>
				</view>
			</block>
			<block v-if="navType === 'voideInfo'">
				<view class="find-car-box flex a-i-c j-c-b">
					<view class="flex a-i-c">
						<image class="live-my-icon" @click="goBack" src="@/static/images/nav-back-white.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="find-card-tab flex a-i-c">
					</view>
					<view class="search-button all-center">
					</view>
				</view>
			</block>
			<block v-if="navType === 'rechangeMoney'">
				<view class="find-car-box flex a-i-c j-c-b" @click="goTo({url:'/pages/live/config/rechangeLog'})">
					<view class="flex a-i-c margin-right">
						<image class="back-icon" @click.stop="goBack" src="@/static/images/back-icon-nav.svg" mode=""></image>
						<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
							<text class="address-text">{{title || ""}}</text>
						</view>
					</view>
					<view class="f-s-26" style="color: #8D8D8D;" @click.stop="goTo({url:'/pages/live/config/rechangeLog'})">
						提现明细
					</view>
				</view>
			</block>
			<block v-if="navType === 'vip'">
				<view class="find-car-box flex a-i-c j-c-b" @click="goTo({url:'/pages/live/config/rechangeLog'})">
					<view class="flex a-i-c margin-right">
						<image class="back-icon" @click.stop="goBack" src="@/static/images/nav-back-white.svg" mode=""></image>
					</view>
					
					<view class="f-s-40 flex a-i-c f-w-b" :style="{color:navColor}">
						<text class="address-text">{{title || ""}}</text>
					</view>
					<view class="f-s-26" style="color: #8D8D8D;" @click.stop="goTo({url:'/pages/live/config/rechangeLog'})">
						<image style="width:16.21px; height:16.95px;"  @click.stop="goBack" src="@/static/images/vip/logs.svg" mode=""></image>
					</view>
				</view>
			</block>
			<my-picker ref="myPicker" :isState="true"></my-picker>
		</view>
	</view>
</template>

<script>
	import pickerView from "@/components/myComponents/pickerView.vue"
	import {mapGetters,mapMutations} from "vuex"
	import {goBack,goTo,goSwitch} from "@/nav.js"
	import {deAes,enAes} from "@/utils/pagePublic.js"
	export default {
		components:{
			"my-picker":pickerView
		},
		props:{
			showAllClassBtn:{
				type:Boolean,
				default(){
					return false
				}
			},
			title:{
				type:String,
				default:''
			},
			pageType:{
				type:String,
				default:'index'
			},
			navType:{
				type:String,
				default(){
					return "index"
				}
			},
			showLeft:{
				type:Boolean,
				default(){
					return true
				}
			},
			showIndex:{
				type:Boolean,
				default(){
					return false
				}
			},
			showAddCard:{
				type:Boolean,
				default(){
					return false
				}
			},
			navColor:{
				type:String,
				default:'#333333'
			},
			backType:{
				type:String,
				default:'black'
			},
			navRight:{
				type:Boolean,
				default(){
					return false
				}
			}
		},
		computed:{
			...mapGetters(["navAddress","userInfo"]),
			show_dito(){
				return this.$store.state.showNotice
			}
		},
		created() {
		},
		data() {
			return {
				keyword:"",
				isIphone:false,
				paddingTop:"",
				height:"",
				find_car_tab:[
					{
						id:1,
						title:"找车"
					},
					{
						id:0,
						title:"找货"
					}
				],
				log_tab_list:[
					{
						id:1,
						title:"充值"
					},
					{
						id:2,
						title:"提现"
					}
				],
				changeLogTab_id:1,
				changeFindCarTab_id:1,
				work_tab_list:[
					{
						id:0,
						title:"找司机"
					},
					{
						id:1,
						title:"找工作"
					}
				],
				changeLiveTab_id:1,
				live_tab_list:[
					{
						id:0,
						title:"直播"
					},
					{
						id:1,
						title:"短视频"
					}
				],
				changeWorkTab_id:0,
				timeout:"",
				top_number:0,
				show_menu:false,
			}
		},
		mounted() {
			this.initNavBar()
		},
		methods: {
			...mapMutations([
				"changeFindCarTab",
				"changeLogTab",
				"changeWorkTab",
				"changeNavKeyWords",
				"changeGoodsKeyWrods",
				"changeSearchKeyWords",
				"changeLiveTab"
			]),
			goBack,goTo,goSwitch,
			// setDetio(){
			// 	let that = this
			// 	that.util.postRequest({
			// 		url:"v1/user/unread"
			// 	}).then(res=>{
			// 		console.log(res)
			// 		if(res.data.message>0 || res.data.notice_count>0){
			// 			that.show_dito = true
			// 		}else{
			// 			that.show_dito = false
			// 		}
			// 	})
			// },
			navConfigClick(){
				this.$store.commit("changeOpenConfig")
			},
			showLiveMenu(){
				this.show_menu = !this.show_menu
			},
			keyWrodInput(e){
				let key = e.currentTarget.dataset.type
				this.timeout === '' && (this.timeout = setTimeout(()=>{
						clearTimeout(this.timeout)
						this[key](this.keyword)
						this.timeout = ""
					},600))
			},
			downLoadQrCode(){
				this.$emit("downQrCode",true)
			},
			changeTab(type,item){
				this[`${type}_id`] = item.id
				this[type](item.id)
			},
			showMyAddress(){
				this.$refs.myPicker.show()
			},
			initNavBar(){
				let sys = uni.getSystemInfoSync()
				this.isIphone = sys.model.indexOf("iPhone")<0?false:true
				this.paddingTop = sys.statusBarHeight+'px'
				this.top_number = sys.statusBarHeight+(this.isIphone?44:48)
				this.height = (sys.statusBarHeight+(this.isIphone?44:48))+'px'
				if(this.navType === 'my' || this.navType === "findCar" || this.navType === 'getwork' || this.navType === 'circle'){
					// this.setDetio()
				}
			},
			openQrCodeMy() {
				this.$nextTick(()=>{
					this.$refs.qrUserImagePopup.open()
				})
			},
			saveUserQrCode() {
				uni.saveImageToPhotosAlbum({
					filePath:this.userInfo.qr_code,
					success:(res) => {
						uni.showToast({
							icon:'none',
							title:'保存成功'
						})
					}
				})
			},
			openQrCode(){
				let that = this
				uni.scanCode({
					success(res){
						try {
							let e = res.result.split('?')
							let e_data = e[1].split('=')
							// arr[1] = arr[1].replace(" ","+")
							let data = JSON.parse(e_data[1])
							
							let str = ''
							Object.keys(data.params).map(val=>{
								str = str+val+'='+data.params[val]+'&'
							})
							console.log(data.page+'?'+str)
							that.goTo({url:data.page+'?'+str})
							
						} catch (e) {
							uni.showToast({
								title:"无效的二维码",
								icon:"none"
							})
						}
						
						// 不需要解密了
						
						// deAes(arr[1],(ares)=>{
						// 	console.log(ares,"FFFFFF")
						// 	if(ares.data){
								
						// 	}else{
						// 		uni.showToast({
						// 			title:"无效的二维码",
						// 			icon:"none"
						// 		})
						// 	}
							
						// })
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.search-button{
		width: 64upx;
		height: 64upx;
		border-radius: 50%;
		background: rgba(0,0,0,0.36);
		.icon{
			width: 40upx;
			height: 40upx;
		}
	}
	.live_line{
		width: 28upx;
		height: 6upx;
		background:linear-gradient(40deg, #FBB10B 100% , #FB3A0B 100%);
		position: absolute;
		border-radius: 6upx;
		bottom: -20upx;
	}
	.open-live-box{
		position: absolute;
		z-index: 3;
		width: 180upx;
		background: rgba(0, 0, 0, 0.9);
		border-radius: 12upx;
		padding: 0;
		right: 18upx;
		overflow: hidden;
		transition: height .3s ease-out;
		.live-button-item{
			width: 100%;
			margin-bottom: 36upx;
			.icon{
				width: 44upx;
				height: 44upx;
			}
		}
	}
	.open-live-show{
		height: 250upx;
	}
	.open-live-hide{
		height: 0;
	}
	.live-icon{
		width: 64upx;
		height: 64upx;
	}
	.add-card{
		width: 120upx;
		height: 48upx;
		background: #FFFFFF;
		border-radius: 80upx;
		
	}
	.nav-my{
		width: 100%;
		padding: 0 28upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.setting-icon{
			width: 48upx;
			height: 48upx;
			margin-right: 36upx;
		}
	}
	.find-card-tab{
		.item{
			position: relative;
			margin-right: 40upx;
			.line{
				position: absolute;
				width: 36upx;
				height: 6upx;
				background: #2567F3;
				border-radius: 6upx;
				bottom: -12upx;
			}
		}
		.live_active{
			color: #ffffff;
			font-size: 36upx;
			font-weight: bold;
		}
		.live_unactive{
			font-size: 32upx;
			color: rgba(255,255,255,0.6);
		}
		.active{
			color: #333;
			font-weight: bold;
		}
		.unactive{
			color: #999;
		}
	}
	.find-car-box{
		width: 100%;
		height: 100%;
		padding: 0 28upx;
		.index-box{
			width: 136upx;
			height: 48upx;
			background: #FFFFFF;
			border-radius: 80upx;
			.index-icon{
				width: 36upx;
				height: 36upx;
				margin-right: 16upx;
			}
		}
		.index-box1{
			.index-icon{
				width: 60upx;
				height: 60upx;
				margin-right: 16upx;
			}
		}
		.index-box2{
			width: 250upx;
			.index-icon{
				width: 60upx;
				height: 60upx;
				margin-right: 16upx;
			}
		}
	}
	.back-icon{
		height: 26upx;
		width: 30upx;
		margin-right: 20upx;
	}
	.live-my-icon{
		height: 48upx;
		width: 48upx;
	}
	.circle-nav-box{
		width: 100%;
		height: 100%;
		padding: 0 28upx;
		.left{}
	}
	.right{
		width: 48upx;
		height: 48upx;
		position: relative;
		.image{
			width: 100%;
			height: 100%;
		}
		.image2{
			margin-left: 20upx;
			width: 140%;
			height: 140%;
			position: relative;
			top: -17%;
		}
		.dlog-dig{
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			width: 14upx;
			height: 14upx;
			background-color: #EE8300;
			border-radius: 50%;
		}
	}
	.address-search-score-view{
		width: 100%;
		padding: 0 28upx;
		.margin-right{
			margin-right: 36upx;
		}
		.score-icon{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.search-f{
		width: 480upx;
		background: linear-gradient(to right, #0E98E8 100%, #2466F2 100%);
		border-radius: 36upx;
		padding: 1upx;
		.search-box{
			width: 100%;
			height: 72upx;
			background: #FCFEFF;
			border-radius: 36upx;
			padding: 0 34upx;
			.search-icon{
				width: 32rpx;
				height: 32rpx;
				margin-right: 16upx;
			}
		}
	}
	.address-box{
		.address-text{
			width:100upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.more-icon{
			width: 10upx;
			height: 6upx;
			margin-left: 10upx;
			margin-right: 28upx;
		}
	}
	.shop-car{
		width: 40upx;
		height: 40upx;
		margin-bottom: 4upx;
	}
	.nav-bar{
		width: 750rpx;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		// background-color: #000;
	}
	
	
	
	.qr-image-popup{
		.save-qr-image-button{
			width: 288upx;
			height: 96upx;
			border-radius: 128upx;
			background: #2567F3;
		}
		.user-qr{
			width: 528rpx;
			margin-bottom: 36upx;
			background: #FFFFFF;
			padding-bottom: 58upx;
			border-radius: 16upx;
			.user-qr-tip-text{
				
			}
			.qr-image-user{
				width: 348upx;
				height: 348upx;
				margin-bottom: 28upx;
			}
			.avatar{
				width: 128upx;
				height: 128upx;
				border-radius: 50%;
				margin-top: -64upx;
				margin-bottom: 20upx;
			}
		}
	}
</style>